<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* body{
            width: 100%;
            height: 100%;
            background: pink;
        }
        form {
            width: 500px;
            height: 240px;
            background: rgb(0, 183, 255);
            margin: 100px auto;
            text-align: center;
            padding-top: 110px;
        } */
        body {
            width: 100%;
            height: 100%;
            background: pink;
        }

        .form1 {
            width: 300px;
            margin: 100px auto;
            background-color: cadetblue;
            padding: 50px;
        }

        .item {
            margin-bottom: 20px;
        }

        p {
            color: #3520aa;
            font-size: 14px;
        }

        .regbtn {
            width: 200px;
            height: 30px;
            line-height: 30px;
            background-color: #1e3e6e;
            text-align: center;
            border: none;
            color: white;
            margin-left: 30px;
            border-radius: 8px;
            cursor: pointer;
        }

        .regbtn:hover {
            background-color: #2958af;
        }

        span {
            font-size: 12px;
            color: rgb(200, 255, 0);
        }
    </style>
    <script src="js/jquery-3.6.0.js"></script>
    

</head>

<body>
    <!-- <form>
        用 户 名:<input type="text" name="username">
        <p></p>
        密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="password" name="password">
        <p></p>
        <input type="button" value="登录">

    </form> -->



    <form class="form1">
        <div class="item">
            <label for="">用户名:</label>
            <input type="text" name="username">
            <p class="user"></p>
        </div>
        <div class="item">
            <label for="">密&nbsp;&nbsp;&nbsp;码:</label>
            <input type="text" name="password">
            <p class="psw"></p>

        </div>
        <div class="item">
            <label for="">邮&nbsp;&nbsp;&nbsp;箱:</label>
            <input type="text" name="email">
            <p class="email"></p>
        </div>

        <div>
            <input type="submit" value="注册" class="regbtn">
        </div>
    </form>



    <!-- <script>
        $('input[value="登录"]').on('click', function () {
            location.href = './index.html'
        })
    </script> -->




    <script>
        var formEle = document.querySelector('.form1')
        var userNameInput = document.querySelector('input[name="username"]')
        var passwordInput = document.querySelector('input[name="password"]')
        var emailInput = document.querySelector('input[name="email"]')
        //提示信息节点
        var pEle = document.querySelector('.user')
        var pswEle = document.querySelector('.psw')
        var emailEle = document.querySelector('.email')

        //1. =====表单提交触发验证=====
        formEle.addEventListener('submit', function (e) {
            e = e || window.event //事件对象
            e.preventDefault() //阻止表单默认action动作

            //非空验证
            var isUserName = checkUsernameNull()
            var isPassword = checkPasswordNull()
            let isEmail = checkEmailNull()

            //密码强度验证
            //非空验证通过之后
            if (isUserName && isPassword && isEmail) {
                //如果非空验证全部通过，执行后面邮箱格式和密码强度验证
                let isCheckPassword = checkPassword()
                let isCheckEmail = checkEmail()

                if (isCheckPassword && isCheckEmail) {
                    skip()

                    //     //跳转提交页面
                    //     location.href =
                    //         `https://www.baidu.com/?username=${userNameInput.value}&password=${passwordInput.value}`
                }
            }
        })
        //跳转
        function skip() {
            // $('input[value="注册"]').on('click', function () {
                location.href = './index.html'
            // })
        }


        //2.=======失去焦点触发验证============
        userNameInput.onblur = function () {
            checkUsernameNull()
        }

        passwordInput.onblur = function () {
            //密码非空验证成功后执行密码强度验证
            if (!checkPasswordNull()) {
                return
            }
            checkPassword()
        }

        emailInput.onblur = function () {
            if (!checkEmailNull()) {
                return
            }

            checkEmail()
        }




        /*
         * 检查用户名是否为空
         *  true 验证通过
         *  false 验证未通过
         */
        function checkUsernameNull() {
            var username = userNameInput.value // 获取用户名
            //非空验证
            if (username == '') {
                pEle.innerHTML = '用户名不能为空!'
                return false
            } else {
                pEle.innerHTML = ''
                return true
            }
        }

        /*
         *  密码非空验证
         *  true 验证通过
         *  false 验证未通过
         */
        function checkPasswordNull() {
            var password = passwordInput.value //密码
            if (password == '') {
                pswEle.innerHTML = '密码不能为空!'
                return false
            } else {
                pswEle.innerHTML = ''
                return true
            }
        }

        /**
         * 邮箱非空验证
         */
        function checkEmailNull() {
            let email = emailInput.value
            if (email == '') {
                emailEle.innerHTML = '邮箱不能为空!'
                return false
            } else {
                emailEle.innerHTML = ''
                return true
            }
        }

        /**
         * 密码强弱验证:
            以大写字母开头，必须是数字字母组合，至少8位
         **/
        function checkPassword() {
            let password = passwordInput.value
            let reg = /^[A-Z][0-9a-zA-Z]{6,}/
            if (!reg.test(password)) {
                pswEle.innerHTML = '密码是数字字母组合，至少8位,大写开头'
                return false
            } else {
                pswEle.innerHTML = ''
                return true
            }
        }

        /**
         * 邮箱格式验证
         */
        function checkEmail() {
            let email = emailInput.value
            let reg = /[0-9a-zA-Z]+@[0-9a-zA-Z]+\.com|\.cn$/
            if (!reg.test(email)) {
                emailEle.innerHTML = '邮箱只能是字母数字组合，包含@符号，以.com结尾'
                return false
            } else {
                emailEle.innerHTML = ''
                return true
            }
        }
    </script>
</body>

</html>